<template>
	<view class="login">
		<view class="container-box">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="flex-box center-box fill-height">
					<view>
						<view class="photo">
							<image :src="photo" mode="aspectFit"></image>
						</view>
						<view class="text-box">让教育更幸福</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-box center-box">
			<view class="btn-box">手机号授权登录</view>
		</view>
		<view class="flex-box center-box">
			<view class="nologin-box">暂不登录</view>
		</view>
	</view>
</template>

<script setup>
	import photo from '@/asstes/images/mine/photo.png'
</script>

<style lang="scss" scoped>
	.login {
		height: 100%;
		display: flex;
		flex-direction: column;

		.container-box {
			flex: 1;
			overflow: hidden;

			.photo {
				width: 240rpx;
				height: 240rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}

		.center-box {
			justify-content: center;
		}

		.text-box {
			font-size: 32rpx;
			color: #000;
			margin-top: 40rpx;
			text-align: center;
		}

		.btn-box {
			padding: 20rpx 140rpx;
			border-radius: 10rpx;
			background: rgba(67, 207, 124, 1);
			color: #fff;
			font-size: 36rpx;
		}
		.nologin-box{
			color:  rgba(67, 207, 124, 1);
			font-size: 36rpx;
			margin-top: 20rpx;
			padding-bottom: 270rpx;
		}
	}
</style>